<%-- 
    Document   : index
    Created on : 13-abr-2014, 20:52:56
    Author     : Isaac Paliza <anndysaac@hotmail.com>
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html> 
<html lang="es">
    <head>
        <%-- 
    Document   : index
    Created on : 13-abr-2014, 20:52:56
    Author     : Isaac Paliza <anndysaac@hotmail.com>
--%>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <meta charset="utf-8"/>
        <title>SICFE</title>
        <link rel="stylesheet" href="css/normalize.css" />
        <link rel="stylesheet" href="css/index/estilosIndex.css" />
        <link rel="shortcut icon" type="image/x-icon" href="images/logo.png"/>

        <link rel='stylesheet' id='camera-css'  href='css/index/camera.css' type='text/css' media='all'> 

        <script type='text/javascript' src='js/jquery.min.js'></script>
        <script type='text/javascript' src='js/jquery.mobile.customized.min.js'></script>
        <script type='text/javascript' src='js/jquery.easing.1.3.js'></script> 
        <script type='text/javascript' src='js/camera.min.js'></script> 
        <script>
            jQuery(function() {

                jQuery('#camera_wrap_1').camera({
                    thumbnails: true
                });
            });
        </script>
    </head>    
    <body>
        <header>
            <hgroup>
                <h1>Distribuidora Castañita</h1>
                <h2></h2>
            </hgroup>
        </header>
        <section>
            <figure id="imagen">
                <div class="fluid_container">
                    <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
                        <div data-thumb="images/index/thumbs/imag1.JPG" data-src="images/index/slides/imag1.JPG">
                            <div class="camera_caption fadeFromBottom">
                                Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
                            </div>
                        </div>
                        <div data-thumb="images/index/thumbs/imag2.JPG" data-src="images/index/slides/imag2.JPG">
                            <div class="camera_caption fadeFromBottom">
                                It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                            </div>
                        </div>
                        <div data-thumb="images/index/thumbs/imag3.JPG" data-src="images/index/slides/imag3.JPG">
                            <div class="camera_caption fadeFromBottom">
                                <em>It's completely free</em> (even if a donation is appreciated)
                            </div>
                        </div>
                        <div data-thumb="images/index/thumbs/imag4.JPG" data-src="images/index/slides/imag4.JPG">
                            <div class="camera_caption fadeFromBottom">
                                Camera slideshow provides many options <em>to customize your project</em> as more as possible
                            </div>
                        </div>
                        <div data-thumb="images/index/thumbs/imag5.JPG" data-src="images/index/slides/imag5.JPG">
                            <div class="camera_caption fadeFromBottom">
                                It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
                            </div>
                        </div>
                        <div data-thumb="images/index/thumbs/imag6.JPG" data-src="images/index/slides/imag6.JPG">
                            <div class="camera_caption fadeFromBottom">
                                Different color skins and layouts available, <em>fullscreen ready too</em>
                            </div>
                        </div>
                    </div>
                </div>
            </figure>
            <article id="logi">
                <figcaption>
                    <h1 id="titulo">Bienvenido a ...</h1>
                    <h2 id="subtitulo">Inicio de sesión</h2>
                    <form action='contenedor.jsp'>
                        <ul id ="c"><input id ="campo" type="text" name="nombre" placeholder="Id Usuario" required></ul>
                        <ul id ="c"><input id ="campo" type="password" name="nombre" placeholder="Contraseña" required></ul>
                        <ul><input type="submit" title="Botón" value = "Iniciar Sesión" required></ul>
                    </form>
                </figcaption>
            </article>
        </section>
        <footer>
            <h2><i>SICFES:</i> Sistema de Control de Ferias de Libros Escolares</h2>
        </footer>
    </body>
</html>
